<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">路线：</span>
        <el-select size="mini" v-model="params.form_to" placeholder="选择路线">
          <el-option label="中关村校区-良乡校区" value="中关村校区-良乡校区"></el-option>
          <el-option label="良乡校区-中关村校区" value="良乡校区-中关村校区"></el-option>
          <el-option label="中关村校区-西山校区" value="中关村校区-西山校区"></el-option>
          <el-option label="西山校区->中关村校区" value="西山校区->中关村校区"></el-option>
          <el-option label="中关村校区-回龙观" value="中关村校区-回龙观"></el-option>
          <el-option label="回龙观-中关村校区" value="回龙观-中关村校区"></el-option>
          <el-option label="中关村校区-房山分校阎村" value="中关村校区-房山分校阎村"></el-option>
          <el-option label="房山分校阎村-中关村校区" value="房山分校阎村-中关村校区"></el-option>
          <el-option label="良乡校区-回龙观" value="良乡校区-回龙观"></el-option>
          <el-option label="回龙观-良乡校区" value="回龙观-良乡校区"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">开始时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">类型：</span>
        <el-select size="mini" v-model="params.type" placeholder="请选择展示类型" clearable>
          <el-option v-for="item in Types" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <el-button @click="getBusYujing" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <el-table
      :data="data"
      border
      height="calc(100% - 100px)"
      class="custom-table"
      style="width: 100%">
      <el-table-column
        prop="alarm_date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="name"
        label="班次">
      </el-table-column>
      <el-table-column
        prop="origin_time"
        label="发车时间">
      </el-table-column>
      <el-table-column
        prop="yycount"
        label="预约人数">
      </el-table-column>
      <el-table-column
        prop="alarm_des"
        label="预警内容">
      </el-table-column>
      <el-table-column
        prop="alarm_time"
        label="预警时间">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import portal from '@/api/portal'
export default {
  name: 'WarningChart',
  data () {
    return {
      params: {
        page: 1,
        form_to: null,
        start_time: null,
        end_time: null,
        type: null
      },
      statusList: [],
      Types: [
        {
          text: '预约满员',
          value: 1
        },
        {
          text: '预约低于',
          value: 2
        },
        {
          text: '补单超过',
          value: 3
        }
      ],
      data: []
    }
  },
  components: {
  },
  created () {
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    search () {
      this.params.page = 1
      this.getBusYujing()
    },
    async getBusYujing () {
      this.loading = true
      if (!this.params.form_to) {
        this.$message.warning('请选择路线')
        return
      }
      if (!this.params.start_time) {
        this.$message.warning('请选择开始时间')
        return
      }
      if (!this.params.end_time) {
        this.$message.warning('请选择结束时间')
        return
      }
      const result = await portal.getBusYujing(this.params)
      if (result.data) {
        this.data = result.data
        this.params.total = result.data.total
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
